<!DOCTYPE html>
<html>

	<head>
		<title>GeoJSON example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>

	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>

		</div>
		<script>
			var image = new ol.style.Circle({
				radius: 5,
				fill: null,
				stroke: new ol.style.Stroke({
					color: 'red',
					width: 1
				})
			});
			var styles = {
				'Point1': [new ol.style.Style({
					image: new ol.style.Icon({
						opacity: 0.95,
						src: 'img/u234.png'
					})
				})],
				'Point': [new ol.style.Style({
					image: image
				})],
				'LineString': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'green',
						width: 1
					})
				})],
				'MultiLineString': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'green',
						width: 1
					})
				})],
				'MultiPoint': [new ol.style.Style({
					image: image
				})],
				'MultiPolygon': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'yellow',
						width: 1
					}),
					fill: new ol.style.Fill({
						color: 'rgba(255, 255, 0, 0.1)'
					})
				})],
				'Polygon': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'blue',
						lineDash: [4],
						width: 3
					}),
					fill: new ol.style.Fill({
						color: 'rgba(0, 0, 255, 0.1)'
					})
				})],
				'GeometryCollection': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'magenta',
						width: 2
					}),
					fill: new ol.style.Fill({
						color: 'magenta'
					}),
					image: new ol.style.Circle({
						radius: 10,
						fill: null,
						stroke: new ol.style.Stroke({
							color: 'magenta'
						})
					})
				})],
				'Circle': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'red',
						width: 2
					}),
					fill: new ol.style.Fill({
						color: 'rgba(255,0,0,0.2)'
					})
				})]
			};
			var styleFunction = function(feature, resolution) {
				if(feature.get("type") == "Point1"){
					return styles["Point1"];
				}
				return styles[feature.getGeometry().getType()];
			};
			var geojsonObject = {
				'type': 'FeatureCollection',
				'crs': {
					'type': 'name',
					'properties': {
						'name': 'EPSG:3857'
					}
				},
				'features': [{
					'type': 'Feature',
					'geometry': {
						'type': 'Point',
						'coordinates': [0, 0]
					},
					'properties': {
						'type': 'Point1'
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'LineString',
						'coordinates': [
							[4e6, -2e6],
							[8e6, 2e6]
						]
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'LineString',
						'coordinates': [
							[4e6, 2e6],
							[8e6, -2e6]
						]
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'Polygon',
						'coordinates': [
							[
								[-5e6, -1e6],
								[-4e6, 1e6],
								[-3e6, -1e6]
							]
						]
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'MultiLineString',
						'coordinates': [
							[
								[-1e6, -7.5e5],
								[-1e6, 7.5e5]
							],
							[
								[1e6, -7.5e5],
								[1e6, 7.5e5]
							],
							[
								[-7.5e5, -1e6],
								[7.5e5, -1e6]
							],
							[
								[-7.5e5, 1e6],
								[7.5e5, 1e6]
							]
						]
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'MultiPolygon',
						'coordinates': [
							[
								[
									[-5e6, 6e6],
									[-5e6, 8e6],
									[-3e6, 8e6],
									[-3e6, 6e6]
								]
							],
							[
								[
									[-2.5e3, 3e3],
									[-2.5e3, 4e3],
									[-1.5e3, 4e3],
									[-1.5e3, 3e6]
								]
							],
							[
								[
									[1e6, 6e6],
									[1e6, 8e6],
									[3e6, 8e6],
									[3e6, 6e6]
								]
							]
						]
					}
				}, {
					'type': 'Feature',
					'geometry': {
						'type': 'GeometryCollection',
						'geometries': [{
							'type': 'LineString',
							'coordinates': [
								[-5e6, -5e6],
								[0, -5e6]
							]
						}, {
							'type': 'Point',
							'coordinates': [4e6, -5e6]
						}, {
							'type': 'Polygon',
							'coordinates': [
								[
									[1e6, -6e6],
									[2e6, -4e6],
									[3e6, -6e6]
								]
							]
						}]
					}
				}]
			};
			var vectorSource = new ol.source.Vector({
				/*features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)*/
			});
			var cir = new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6));
			cir.set("ganta","aaa");
			vectorSource.addFeature(cir);
			/*var cir1 = new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e1));
			vectorSource.addFeature(cir1);*/
			var line = new ol.Feature(new ol.geom.LineString([[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]));
			vectorSource.addFeature(line);
			var vectorLayer = new ol.layer.Vector({
				source: vectorSource,
				style: styleFunction
			});
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					}),
					vectorLayer
				],
				target: 'map',
				controls: ol.control.defaults({
					attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
						collapsible: false
					})
				}),
				view: new ol.View({
					center: [0, 0],
					zoom: 2
				})
			});
			var ext = cir.getGeometry().getExtent();
			var ext1 = line.getGeometry().getExtent();
			ext = ol.extent.extend(ext,ext1);
			map.getView().fit(ext,map.getSize());
			map.on("pointermove",function(evt){
				var feature = evt.map.forEachFeatureAtPixel(evt.pixel,function(feature, layer) {
					console.log(layer);
					return feature;
				});
				if(feature == cir){
					alert(feature.get("ganta"));
				}
			});
			$.getJSON("js/wq.js",function(data){
				var a = new ol.Feature(new ol.geom.Polygon([data]));
				vectorSource.addFeature(a);
				map.getView().fit(a.getGeometry(), map.getSize());
			});
		</script>
	</body>

</html>